<template>
  <div class="share-page">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>商品分析</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/product-ranking' }"
        >商品销量排行</el-breadcrumb-item
      >
    </el-breadcrumb>
    <div class="abnormal-page">
      <div class="content-box">
        <div class="right">
          <div class="title">设备选择：</div>
          <div class="choice-list">
            <div class="choice-item">
              <div class="choice-title">设备名称</div>
              <el-select v-model="formInline.secDev" placeholder="请选择">
                <el-option
                  v-for="i in secDevOpt"
                  :key="i.value"
                  :label="i.label"
                  :value="i.value"
                />
              </el-select>
            </div>
            <div class="choice-item">
              <div class="choice-title">设备IMEI</div>
              <el-select v-model="formInline.secIMEI" placeholder="请选择">
                <el-option
                  v-for="i in IMEIOpt"
                  :key="i.value"
                  :label="i.label"
                  :value="i.value"
                />
              </el-select>
            </div>
            <div class="choice-item">
              <div class="choice-title">场地</div>
              <el-select v-model="formInline.secCity" placeholder="请选择地">
                <el-option
                  v-for="i in cityOpt"
                  :key="i.value"
                  :label="i.label"
                  :value="i.value"
                />
              </el-select>
            </div>
            <div class="choice-item">
              <div class="choice-title">场景</div>
              <el-select v-model="formInline.secScene" placeholder="请选择">
                <el-option
                  v-for="i in sceneOpt"
                  :key="i.value"
                  :label="i.label"
                  :value="i.value"
                />
              </el-select>
            </div>
            <div class="choice-item">
              <div class="choice-title">补货员</div>
              <el-select
                v-model="formInline.seachReplenishman"
                placeholder="请选择"
              >
                <el-option
                  v-for="i in replenishmanOptions"
                  :key="i.value"
                  :label="i.label"
                  :value="i.value"
                />
              </el-select>
            </div>
            <div class="choice-item">
              <div class="choice-title">线路</div>
              <el-select v-model="formInline.seachLine" placeholder="请选择">
                <el-option
                  v-for="i in lineOptions"
                  :key="i.value"
                  :label="i.label"
                  :value="i.value"
                />
              </el-select>
            </div>
            <div class="choice-item">
              <div class="choice-title">省市区</div>
              <el-select
                v-model="formInline.seachProvince"
                placeholder="请选择"
              >
                <el-option
                  v-for="i in provinceOptions"
                  :key="i.value"
                  :label="i.label"
                  :value="i.value"
                />
              </el-select>
            </div>
            <div class="choice-item">
              <div class="choice-title">商圈</div>
              <el-select
                v-model="formInline.seachBusiness"
                placeholder="请选择"
              >
                <el-option
                  v-for="i in businessOptions"
                  :key="i.value"
                  :label="i.label"
                  :value="i.value"
                />
              </el-select>
            </div>
          </div>
          <div class="flex-a">
            <el-checkbox class="mr-10" v-model="checked">全选</el-checkbox>
            <span>共138台设备</span>
          </div>
          <div class="list-box">
            <div class="list" v-for="(v, i) of 10" :key="i">
              <div class="line">新颜路1号（869825043628429）</div>
              <div class="people">补货员：13306236880</div>
              <div>中国工商银行24小时自动银行（常熟新世纪支行）</div>
              <div>线路：小王</div>
              <img src="/src/assets/data-center/勾选角标.png" />
            </div>
          </div>
        </div>
        <div class="left">
          <div class="title">商品销售排行</div>
          <div class="choice-list">
            <div class="date-item">
              <div class="choice-title mx-6">日期</div>
              <el-date-picker
                class="mx-6"
                v-model="detailTime"
                type="date"
                placeholder="请选择日期"
                style="width: 200px; margin: 0px 10px"
              />
              <el-button round color="#0071bb" :icon="Search">查询</el-button>
              <el-button round>导出排行清单</el-button>
            </div>

            <!-- <el-button round :icon="Setting" color="#0071bb">筛选</el-button> -->
            <el-dropdown :hide-on-click="false">
              <span class="el-dropdown-link">
                <el-button round color="#0071bb" :icon="Setting"
                  >筛选</el-button
                >
              </span>
              <template #dropdown>
                <el-dropdown-menu style="max-height: 300px">
                  <el-dropdown-item
                    v-for="(item, index) in checkArr"
                    :key="index"
                    @click.stop="filterTableData(item)"
                  >
                    <el-checkbox
                      v-model="item.show"
                      size="large"
                      :label="item.label"
                    />
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="tables">
            <el-table :data="tableData" style="width: 100%" height="66vh">
              <el-table-column
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                v-for="(item, index) in headerArr"
                :key="index"
              >
                <template #default="scope">
                  <img
                    v-if="item.prop == 'img'"
                    class="goods_img"
                    :src="scope.row.img"
                  />
                </template>
              </el-table-column>
            </el-table>
            <div class="page_number">
              <el-pagination
                v-model:current-page="pager.currentPage"
                v-model:page-size="pager.pageSize"
                layout="prev, pager, next, jumper,total"
                :total="pager.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Search, Setting } from "@element-plus/icons-vue";
const formInline = ref({
  secDev: "",
  secIMEI: "",
  secCity: "",
  secScene: "",
  seachReplenishman: "",
  seachLine: "",
  seachProvince: "",
  seachBusiness: "",
});

const secDevOpt = ref([
  {
    label: "设备名称1",
    value: 1,
  },
  {
    label: "设备名称2",
    value: 3,
  },
]);
const IMEIOpt = ref([
  {
    label: "12313",
    value: 1,
  },
  {
    label: "123123123",
    value: 3,
  },
]);
const cityOpt = ref([
  {
    label: "场地1",
    value: 1,
  },
  {
    label: "场地2",
    value: 3,
  },
]);
const sceneOpt = ref([
  {
    label: "场景1",
    value: 1,
  },
  {
    label: "场景2",
    value: 3,
  },
]);
const replenishmanOptions = ref([
  {
    label: "补货员1",
    value: 1,
  },
  {
    label: "补货员2",
    value: 0,
  },
]);
const lineOptions = ref([
  {
    label: "路线1",
    value: 1,
  },
  {
    label: "路线2",
    value: 0,
  },
]);
const provinceOptions = ref([
  {
    label: "省市区",
    value: 1,
  },
  {
    label: "省市区2",
    value: 0,
  },
]);
const businessOptions = ref([
  {
    label: "商圈1",
    value: 1,
  },
  {
    label: "商圈2",
    value: 0,
  },
]);
// 右侧数据
const detailTime = ref("");
const tableData = [
  {
    index:1,
    img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    name: "怡宝菊花茶瓶装450ml",
    code: "85151213232222",
    time: "20天",
    xl: "10",
    pn: "10",
    money: "100",
    kc: "100",
    jy: "建议下架",
    kc2: "2",
    check: "下架",
  },
  {
    index:2,
    img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    name: "怡宝菊花茶瓶装450ml",
    code: "85151213232222",
    time: "20天",
    xl: "10",
    pn: "10",
    money: "100",
    kc: "100",
    jy: "建议下架",
    kc2: "2",
    check: "下架",
  },
  {
    index:3,
    img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    name: "怡宝菊花茶瓶装450ml",
    code: "85151213232222",
    time: "20天",
    xl: "10",
    pn: "10",
    money: "100",
    kc: "100",
    jy: "建议下架",
    kc2: "2",
    check: "下架",
  },
  {
    img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    name: "怡宝菊花茶瓶装450ml",
    code: "85151213232222",
    time: "20天",
    xl: "10",
    pn: "10",
    money: "100",
    kc: "100",
    jy: "建议下架",
    kc2: "2",
    check: "下架",
  },
  {
    img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    name: "怡宝菊花茶瓶装450ml",
    code: "85151213232222",
    time: "20天",
    xl: "10",
    pn: "10",
    money: "100",
    kc: "100",
    jy: "建议下架",
    kc2: "2",
    check: "下架",
  },
  {
    img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    name: "怡宝菊花茶瓶装450ml",
    code: "85151213232222",
    time: "20天",
    xl: "10",
    pn: "10",
    money: "100",
    kc: "100",
    jy: "建议下架",
    kc2: "2",
    check: "下架",
  },
  {
    img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    name: "怡宝菊花茶瓶装450ml",
    code: "85151213232222",
    time: "20天",
    xl: "10",
    pn: "10",
    money: "100",
    kc: "100",
    jy: "建议下架",
    kc2: "2",
    check: "下架",
  },
  {
    img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    name: "怡宝菊花茶瓶装450ml",
    code: "85151213232222",
    time: "20天",
    xl: "10",
    pn: "10",
    money: "100",
    kc: "100",
    jy: "建议下架",
    kc2: "2",
    check: "下架",
  },
  {
    img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    name: "怡宝菊花茶瓶装450ml",
    code: "85151213232222",
    time: "20天",
    xl: "10",
    pn: "10",
    money: "100",
    kc: "100",
    jy: "建议下架",
    kc2: "2",
    check: "下架",
  },
  {
    img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    name: "怡宝菊花茶瓶装450ml",
    code: "85151213232222",
    time: "20天",
    xl: "10",
    pn: "10",
    money: "100",
    kc: "100",
    jy: "建议下架",
    kc2: "2",
    check: "下架",
  },
  {
    img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    name: "怡宝菊花茶瓶装450ml",
    code: "85151213232222",
    time: "20天",
    xl: "10",
    pn: "10",
    money: "100",
    kc: "100",
    jy: "建议下架",
    kc2: "2",
    check: "下架",
  },
];
// 列表选中的属性
const checkArr = ref<any>([
  { label: "排行", prop: "index", show: true },
  { label: "商品图片", prop: "img", show: true },
  {
    label: "商品名称",
    width: "200px",
    prop: "name",
    show: true,
  },
  {
    label: "交易数量",
    prop: "time",
    show: true,
  },
  {
    label: "交易额",
    prop: "xl",
    show: true,
  },
  { label: "退款数量", prop: "pn", show: true },
  { label: "退款额", prop: "money", show: true },
  { label: "成交数量", prop: "kc", show: true },
  { label: "成交额", prop: "kc2", show: true },
]);
const headerArr = ref<any>([
  { label: "排行", prop: "index", show: true },
  { label: "商品图片", prop: "img", show: true },
  {
    label: "商品名称",
    width: "200px",
    prop: "name",
    show: true,
  },
  {
    label: "交易数量",
    prop: "time",
    show: true,
  },
  {
    label: "交易额",
    prop: "xl",
    show: true,
  },
  { label: "退款数量", prop: "pn", show: true },
  { label: "退款额", prop: "money", show: true },
  { label: "成交数量", prop: "kc", show: true },
  { label: "成交额", prop: "kc2", show: true },
]);
const filterTableData = (item: any) => {
  setTimeout(() => {
    headerArr.value = checkArr.value.filter((item: any) => item.show == true);
  }, 500);
};
// 分页
const pager = ref({
  currentPage: 1,
  pageSize: 10,
  total: 10,
}); // 改变pageSize
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
// 改变当前页码 currentPage
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
const checked = ref(true);
</script>

<style lang="scss" scoped>
.abnormal-page {
  background-color: #fff;
  margin-top: 10px;
  padding: 10px;
  .flex-a {
    display: flex;
    align-items: center;
    justify-content: start;
  }
  .mr-10 {
    margin-right: 10px;
  }

  .content-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    .right {
      width: 25%;
      .title {
        font-size: 14px;
      }
      .choice-list {
        display: flex;
        flex-wrap: wrap;
        padding: 10px 0;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        .choice-item {
          width: 50%;
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .el-select {
            width: 250px;
          }
          .choice-title {
            font-size: 12px;
            width: 100px;
            text-align: center;
          }
          .rounded-input {
            width: 250px;
          }
        }
      }
      .list-box {
        height: 58vh;
        overflow: scroll;
        .list {
          background: #00ffff;
          padding: 20px;
          color: #808080;
          margin-bottom: 20px;
          position: relative;
          img {
            position: absolute;
            width: 40px;
            height: 40px;
            top: 0px;
            right: 0px;
          }
          .line {
            font-size: 16px;
            color: #000000;
            margin-bottom: 10px;
          }
          .people {
            color: #000000;
            margin-bottom: 10px;
          }
        }
      }
    }
    .left {
      width: 74%;
      .title {
        font-size: 20px;
        font-weight: 500;
        margin: 10px 0px;
      }
      .choice-list {
        display: flex;
        flex-wrap: wrap;
        padding: 10px 0;
        width: 100%;

        .choice-item {
          width: 25%;
          display: flex;
          align-items: center;
          // margin-bottom: 10px;
          justify-content: space-between;

          .choice-title {
            font-size: 12px;
            width: 80px;
            text-align: center;
          }

          .rounded-input {
            width: 250px;
          }
        }
        .date-item {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: start;
          margin: 0px 10px;
        }
      }
      .tables {
        border: 1px solid #ccc;
        margin-bottom: 2px;
        .check-text {
          color: #0071bb;
          cursor: pointer;
        }
        .delect-text {
          color: red;
          cursor: pointer;
        }
        .round-box {
          border: 1px solid #ccc;
          border-radius: 50px;
          text-align: center;
        }
      }
    }
  }

  .goods_img {
    width: 30px;
    height: 50px;
  }
  .mx-6 {
    margin: 0px 6px;
  }
}
:deep() {
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    width: 100% !important;
  }
  .el-tabs__item {
    width: 33% !important;
  }
}
</style>
